<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head flex-box">
				<view class="tab_item flex-grow-1" :class="{active:job_type==0}" @click="nav(0)">全职</view>
				<view class="tab_item flex-grow-1" :class="{active:job_type==1}" @click="nav(1)">零工</view>
				<view class="tab_item flex-grow-1" :class="{active:job_type==2}" @click="nav(2)">培训</view>
			</view>
			<view class="pt88 pb30">
				<view class="plr30 pt20">
					<template v-if="job_type==0">
						<navigator :url="'/pages/user/post_info?id='+item.job_id" class="business_item"
							v-for="(item,index) in list" hover-class="none">
							<view class="recom_info">
								<view class="flex-box">
									<view class="business_img">
										<image
											:src="cdnurl(item.enterpriseinfo.logo)||'https://admin.mosizp.cn/static/public/business_logo.png'">
										</image>
									</view>
									<view class="flex-grow-1 business_info">
										<view class="flex-box">
											<view class="fs32 col0 fd flex-grow-1 m-ellipsis pr30">{{item.job.job_name}}
											</view>
											<view>{{formatDatetime(item.created_at,'mm月dd日')}}</view>
										</view>
										<view class="flex-box">
											<view class="flex-grow-1">
												<view class="ptb10">{{item.job.city.shortname}} ｜
													{{item.enterpriseinfo.full_name}}
												</view>
												<view class="price">{{item.job.salary_text}}</view>
											</view>
										</view>

									</view>
								</view>
							</view>
						</navigator>
						<view class="nothing" v-if="listMore.nothing">
							<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFill"></image>
							<text>抱歉，暂无相关信息</text>
						</view>
						<button @click="fetch" v-else hover-class="none"
							class="more_btn mt30">{{listMore.text}}</button>
					</template>
					<template v-if="job_type==1">
						<view class="odd_item" v-for="(item,index) in jobs" @click="bindTaskDetail(item.task_id)">
							<view class="flex-box lh50 fs36 col3">
								<view class="flex-grow-1 fwb pr30 m-ellipsis">{{item.task.name}}</view>
								<view class="col4 fs32 fwb">{{item.task.budget}}元/{{item.task.unit_text}}</view>
							</view>
							<view>
								<!-- <view class="label">日结</view> -->
								<view class="label">{{item.task.gender_text}}</view>
							</view>
							<view class="mt20 fs28 col3 lh40"><text
									v-for="cate in item.task.category">{{cate.name}}</text></view>
							<view class="flex-box mt10">
								<view class="flex-grow-1 fs22 cola5 m-ellipsis pr30">{{item.task.work_address}}</view>
								<view class="cola5 fs22">申请时间: {{formatDatetime(item.createtime,'yyyy-mm-dd hh:ii')}}
								</view>
							</view>
							<view class="mid_link flex-box tc">
								<view class="flex-grow-1">
									<view class="fs32 col3 fwb lh46">{{item.task.work_start_time}}</view>
									<view class="cola5 fs22 lh30">上班时间</view>
								</view>
								<view class="tips">工作时间</view>
								<view class="flex-grow-1">
									<view class="fs32 col3 fwb lh46">{{item.task.work_end_time}}</view>
									<view class="cola5 fs22 lh30">下班时间</view>
								</view>
							</view>
						</view>

						<view class="nothing" v-if="jobsMore.nothing">
							<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
							<text>暂无报名信息</text>
						</view>
						<view class="more_btn mt30" v-else @click="fetchOdd()">{{jobsMore.text}}</view>
					</template>
					<template v-if="job_type==2">
						<train-list :jobs="trainList" :trainType="trainType"></train-list>
						<view class="nothing" v-if="trainMore.nothing">
							<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
							<text>暂无培训报名</text>
						</view>
						<view class="more_btn mt30" v-else @click="fetchTrain()">{{trainMore.text}}</view>
					</template>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import trainList from '../../components/train-list/train-list.vue';
	export default {
		components: {
			trainList
		},
		data() {
			return {
				job_type: 0,
				list: [],
				listMore: {
					page: 1
				},
				query: {},
				jobs: [],
				jobsMore: {
					page: 1
				},
				trainType: 'enroll',
				trainList: [],
				trainMore: {
					page: 1
				}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			let page = this;
			if (this.job_type == 0) {
				this.fetch()
			} else if (this.job_type == 1) {
				this.fetchOdd()
			} else if (this.job_type == 2) {
				this.fetchTrain()
			}
		},
		onReachBottom() {
			if (this.job_type == 0) {
				this.fetch()
			} else if (this.job_type == 1) {
				this.fetchOdd()
			} else if (this.job_type == 2) {
				this.fetchTrain()
			}
		},
		methods: {
			nav(jobType) {
				this.job_type = jobType;
				if (this.job_type == 0) {
					this.fetch()
				} else if (this.job_type == 1) {
					this.fetchOdd()
				} else if (this.job_type == 2) {
					this.fetchTrain()
				}

			},
			fetch() {
				this.$util.fetch(this, 'xilujob.job_apply/apply_list', {}, 'listMore', 'list', '');
			},
			fetchOdd() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.task/task_enroll_list', query, 'jobsMore', 'jobs', 'data', data => {

				})
			},
			bindTaskDetail(id) {
				uni.navigateTo({
					url: '/pages/public/odd_job_info?id=' + id
				})
			},
			fetchTrain() {
				this.$util.fetch(this, 'xilujob.train/my_train', this.query, 'trainMore', 'trainList', 'data', 'unique');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pt88 {
		padding-top: 88rpx;
	}

	.page-head {
		height: 88rpx;
		background: var(--primary);

		.tab_item {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;

			&.active {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				position: relative;

				&::after {
					content: '';
					width: 36rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.business_item {
		box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
		background-color: #fff;
		border-radius: 4rpx;
		border: 1rpx solid #EBEBEB;
		padding: 35rpx 30rpx 10rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.business_img {
		width: 80rpx;
		height: 80rpx;
		margin-right: 32rpx;
		margin-left: 20rpx;
	}

	.business_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.business_info {
		font-size: 24rpx;
		color: #333
	}

	.cancel_star {
		font-size: 20rpx;
		color: #999;
		line-height: 39rpx;
		height: 39rpx;
		border-radius: 8rpx;
		border: 1rpx solid #E1E1E1;
		padding: 0 15rpx;
		float: left;
		margin-bottom: 13rpx;
		margin-right: 26rpx;
	}

	.star_type {
		float: left;
		font-size: 20rpx;
		color: #999;
		border-radius: 8rpx;
		line-height: 39rpx;
		height: 39rpx;
		padding: 0 17rpx;
		background-color: #F7F7F7;
		border: 1rpx solid #F7F7F7;
		margin-right: 13rpx;
		margin-bottom: 13rpx;
	}

	.price {
		font-size: 28rpx;
		color: var(--primary);
		font-weight: bold
	}

	.refuse_btn {
		color: #999999;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 8rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.agree_btn {
		color: var(--primary);
		border: 1rpx solid var(--primary);
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 8rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.recom_info {
		padding-bottom: 35rpx;
	}

	.odd_item {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;

		.label {
			display: inline-block;
			vertical-align: top;
			padding: 0 8rpx;
			height: 32rpx;
			background: #ECEFF5;
			border-radius: 4rpx;
			line-height: 32rpx;
			font-size: 22rpx;
			color: #A5A5A5;
			margin-right: 15rpx;
			margin-top: 15rpx;
		}

		.mid_link {
			width: 100%;
			height: 122rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			margin-top: 20rpx;

			.tips {
				font-size: 22rpx;
				color: #2A79F2;
				width: 147rpx;
				height: 49rpx;
				line-height: 49rpx;
				text-align: center;
				background: #E1E9F5;
				border-radius: 28rpx;
			}
		}

		.btn_link {
			margin-top: 30rpx;
			padding-top: 30rpx;
			border-top: 1px solid #EEEEEE;

			.bt1 {
				width: 108rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 1px solid #696969;
				font-size: 24rpx;
				color: #787878;
				text-align: center;
				line-height: calc(52rpx - 2px);
			}

			.bt2 {
				margin-left: 40rpx;
				width: 108rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 1px solid #0067D3;
				line-height: calc(52rpx - 2px);
				text-align: center;
				font-size: 24rpx;
				color: #0067D3;
			}

			.bt3 {
				width: 206rpx;
				height: 52rpx;
				border-radius: 26rpx;
				border: 1px solid #0067D3;
				line-height: calc(52rpx - 2px);
				text-align: center;
				font-size: 24rpx;
				color: #0067D3;
			}
		}
	}

	.btn1 {
		height: 82rpx;
		line-height: 82rpx;
		font-size: 30rpx;
	}
</style>